<script lang="ts" setup>
import {reactive, ref, watch} from 'vue'
import {ElMessage, FormInstance, FormRules} from 'element-plus'
import {registerAPI} from '@/apis/login'
import router from '@/router/index'

const ruleFormRef = ref<FormInstance>()

const validateAccount = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入账号'))
  } else {
    callback()
  }
}
const validatePassword = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (!(value.length>=6&&value.length<=14)) {
    callback(new Error("密码长度为6-14个字符"))
  } else {
    callback()
  }
}

const validateCfPassword = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value!==ruleForm.password) {
    callback(new Error("两次输入的密码不一致"))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  uid:'',
  password: '',
  cfPassword:'',
})


const rules = reactive<FormRules<typeof ruleForm>>({
  uid: [{ validator: validateAccount, trigger: 'blur' }],
  password: [{ validator: validatePassword, trigger: 'blur' }],
  cfPassword: [{ validator: validateCfPassword, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      register()
    } else {
      console.log('error submit!')
    }
  })
}

async function register() {
  const user={
    uid:ruleForm.uid,
    username:'用户_'+new Date().getTime().toString().slice(4,12),
    avatar:'https://tse3-mm.cn.bing.net/th/id/OIP-C.MpGc1WMpmJATpTSKSG-3ogAAAA?w=169&h=176&c=7&r=0&o=5&dpr=1.8&pid=1.7',
    password:ruleForm.password,
    role:'user'
  }
 const res=await registerAPI(user)
  ElMessage({
    type:res.code===200?'success':'error',
    message:res.message
  })
  if(res.code===200){
    router.push('/login')
  }
}

</script>

<template>
  <div class="loginPage">
    <div class="loginBox">

      <div style="">
        <h2>注册账号</h2>
      </div>

      <div class="form">

        <el-form
            ref="ruleFormRef"
            style="max-width: 600px"
            :model="ruleForm"
            status-icon
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm"
        >
            <el-form-item label="账号" prop="uid">
              <el-input
                  class="inputArea"
                  v-model="ruleForm.uid"
                  placeholder="账号"
                  autocomplete="off"
              />
            </el-form-item>

            <el-form-item label="密码" prop="password">
              <el-input
                  class="inputArea"
                  v-model="ruleForm.password"
                  placeholder="密码"
                  type="password"
                  autocomplete="off"
              />
            </el-form-item>

            <el-form-item label="确认密码" prop="cfPassword">
              <el-input
                  class="inputArea"
                  v-model="ruleForm.cfPassword"
                  placeholder="确认密码"
                  type="password"
                  autocomplete="off"
              />
            </el-form-item>

          <el-form-item>
            <el-button
                class="loginBtn"
                type="primary"
                @click="submitForm(ruleFormRef)">
              注&nbsp&nbsp册
            </el-button>

          </el-form-item>
        </el-form>


      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.loginPage{
  width: 100%;
  height: 900px;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  background-image:linear-gradient(135deg,#C2FFD8 10%,#465EFB 100%)
}

.loginBox{
  width: 1000px;
  height: 470px;

  border-radius: 15px;
  background-color: #ffffff;

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.codeBox{
  height: 400px;
  width: 400px;
  //background-color: #ea7128;

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
label{
  font-size: 20px;
  font-weight: bold;
  color:#1A1A1A;
}

.form{
  height: 270px;
  width: 600px;
  background-color: white;

  display: flex;
  justify-content: center;
  align-items: center;
}

.inputArea{
  width: 370px;
  height: 45px;
  :deep(.el-input__wrapper){
    background-color: rgb(162 175 185 / 9%);
    box-shadow: 0 0 0 0 inset;
    border-radius: 10px;
  }
}
.loginBtn{
  margin-left: 70px;
  width: 370px;
  height: 45px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
  background-color: #39bf3e;
  color: white;
  border: none;
}
.el-radio-button{
  :deep(.el-radio-button__inner){
    color: #1B1B1B;
    font-size: 20px;
    font-weight: bold;
    border: none;
  }
}


</style>